/*
 * @Author: syyao 
 * @Date: 2019-05-17 15:22:35 
 * @Last Modified by:   syyao 
 * @Last Modified time: 2019-05-17 15:22:35 
 */
<style scoped>
  .hui_input /deep/ .ivu-input{
    border: 0px;
    border-radius: 0px;
    background-color: #f5f5f5 !important;
  }
</style>

<template>
    <div class="about">
        <!--        取消自动输入密码-->
        <input type="password" style="display:none"/>
        <!--        -->
        <Input class="hui_input" size="large" v-model="logInfo.username" prefix="ios-contact" type="tel" placeholder="请输入手机号" @on-blur="checkTel"
               style="width: 240px;margin-top: 20px;"/>
        <br/>
        <Input class="hui_input" size="large" v-model="logInfo.password" prefix="ios-lock-outline" type="password" placeholder="请输入密码" autocomplete="on"
               style="width: 240px;margin-top: 20px;"/>
        <br/>
        <Input class="hui_input" size="large" v-model="logInfo.confirmPassword" prefix="ios-lock-outline" type="password" @on-blur="checkPassword" autocomplete="on"
               placeholder="请再次输入密码" style="width: 240px;margin-top: 20px;"/>
        <br/>
        <Input class="hui_input" size="large" v-model="logInfo.captcha" prefix="ios-send-outline" placeholder="请输入验证码"
               style="width: 140px;margin-top: 20px;"/>
        <Button type="primary" v-if="send_captcha.isTimeout" style="width:90px;margin-left: 10px;margin-top: 20px;height: 35px;" @click="SendCaptcha">发送验证码</Button>
        <Button type="primary" v-else style="width:90px;margin-left: 10px;margin-top: 20px;height: 35px;">{{send_captcha.reSendTime}}s后再试</Button>
        <br/>
        <Button type="primary" style="width:240px;margin-top: 20px;height: 35px;margin-bottom:20px;" @click="logon">注
            册
        </Button>
    </div>
</template>

<script>
    import cover from "../js/cover";
    import GetUserInfo from "../js/GetUserInfo";

    export default {
        name: "Logon",
        data() {
            return {
                logInfo: {
                    username: '',
                    password: '',
                    confirmPassword: '',
                    captcha: '',
                },
                send_captcha:{
                    reSendTime:60,
                    isSend:false,
                    isTimeout:true,
                    timer: null
                }
            }
        },
        methods: {
            logon() {
                if (this.logInfo.username === '') {
                    this.$Message.warning('请输入账号');
                    return;
                }
                if (this.logInfo.password === '') {
                    this.$Message.warning('请输入密码');
                    return;
                }
                if (this.logInfo.confirmPassword === '') {
                    this.$Message.warning('请确认密码');
                    return;
                }
                if (this.logInfo.password !== this.logInfo.confirmPassword){
                    this.$Message.warning('两次密码不相同');
                    return;
                }
                if (this.logInfo.captcha === '') {
                    this.$Message.warning('请输入验证码');
                    return;
                }

                let _this = this;
                let params = new URLSearchParams();
                params.append('username', this.logInfo.username);
                params.append('password', cover.Encrypt(this.logInfo.password));
                params.append('captcha', this.logInfo.captcha);
                this.http.post(this,'/Logon',params).then(function (msg) {
                        if (msg.data.code === '200') {
                            _this.$Message.success('注册成功');
                            _this.$emit('update:isShow', false);
                            GetUserInfo.getUserInfo(_this);
                        } else {
                            _this.$Message.error(msg.data.message);
                        }
                    }
                )
            },
            checkPassword(){
                if(this.logInfo.password !== this.logInfo.confirmPassword){
                    this.$Message.warning('两次输入的密码不同');
                }
            },
            checkTel(){
                if (this.logInfo.username===""){
                    return;
                }
                if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.logInfo.username))){
                    this.$Message.warning('请输入正确的手机号');
                }
            },
            SendCaptcha(){
                if (this.logInfo.username === '') {
                    this.$Message.warning('请先输入手机号');
                    return;
                }
                if (!this.send_captcha.isSend) {
                    this.send_captcha.isSend = true;
                    let _this = this;
                    let params = new URLSearchParams();
                    params.append('username', this.logInfo.username);
                    this.http.post(this,'/GetCaptcha',params).then(function (msg) {
                        if (msg.data.code === '200') {
                            _this.$Message.success('发送成功');
                            _this.send_captcha.isTimeout = false;
                            _this.send_captcha.timer = setInterval(() => {
                                if (_this.send_captcha.reSendTime > 0) {
                                    _this.send_captcha.reSendTime--;
                                } else {
                                    _this.send_captcha.isTimeout = true;
                                    clearInterval(_this.send_captcha.timer);
                                    _this.send_captcha.timer = null;
                                    _this.send_captcha.isSend = false;
                                }
                            }, 1000)
                        } else {
                            _this.$Message.error(msg.data.message);
                            _this.send_captcha.isSend = false;
                        }
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .about {
        text-align: center;
    }
</style>
